<template>
<div class="message">
  <van-nav-bar
    class="page-nav-bar"
    title="消息"
  ></van-nav-bar>
<van-pull-refresh v-model="loading" @refresh="onLoad" success-text="刷新成功">

<!--    消息头部导航栏-->
    <van-grid clickable :column-num="4" :border="false">
      <van-grid-item  text="@我的"   >
        <van-icon slot="icon" class="iconfont icon-aite"></van-icon>

      </van-grid-item>
      <van-grid-item  text="点赞"  >
                <van-icon slot="icon" class="iconfont icon-dianzan2"></van-icon>

      </van-grid-item>
      <van-grid-item  text="回复"   >
                <van-icon slot="icon" class="iconfont icon-huifu"></van-icon>

      </van-grid-item>
      <van-grid-item  text="粉丝"   >
                <van-icon slot="icon" class="iconfont icon-fensi"></van-icon>

      </van-grid-item>
    </van-grid>

<!--    消息区域-->
    <van-cell title="头条助手"    fit="cover" size="mini" label="头条新功能来啦~" >
      <van-image   slot="icon"
                   width="50"
                   height="50"
                   class="vant-images"
                   src="https://img01.yzcdn.cn/vant/cat.jpeg" round ></van-image>
      <span slot="default">09-10</span>
    </van-cell>
    <van-cell title="头条助手"   fit="cover" size="mini" label="头条新功能来啦~" >
      <van-image   slot="icon"
                   width="50"
                   height="50"
                   class="vant-images"
                   src="https://img01.yzcdn.cn/vant/cat.jpeg" round ></van-image>
      <span slot="default">09-10</span>


    </van-cell>
    <van-cell title="头条助手"   fit="cover" size="mini" label="头条新功能来啦~" >
      <van-image   slot="icon"
                   width="50"
                   height="50"
                   class="vant-images"
                   src="https://img01.yzcdn.cn/vant/cat.jpeg" round ></van-image>
      <span slot="default">09-10</span>


    </van-cell>
    <van-cell title="头条助手"   fit="cover" size="mini" label="头条新功能来啦~" >
      <van-image   slot="icon"
                   width="50"
                   height="50"
                   class="vant-images"
                   src="https://img01.yzcdn.cn/vant/cat.jpeg" round ></van-image>
      <span slot="default">09-10</span>


    </van-cell>


<!--  </van-list>-->


</van-pull-refresh>


</div>

</template>

<script>
export default {
  name: "message",
  data(){
    return{
      loading:false,


    }

  },
  methods:{

    onLoad(){

    setTimeout(()=>{
      this.loading=false

    },2000)

    }
  }
}
</script>

<style scoped lang="less">
.message{
.van-pull-refresh{
  height: 1300px;
}
 .vant-images{
   margin-right: 15px;
 }


}
</style>
